<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!--chart js-->
    <script th:src="@{/admin/plugins/Chart.min.js}" c></script>
    <!--    标签云-->

</head>
<header th:replace="admin/header::header-fragment"></header>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- 引入页面头header-fragment -->
    <div th:replace="admin/header::header-nav"></div>
    <!-- 引入工具栏sidebar-fragment -->
    <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div>

    <!--    内容-->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
            </div><!-- /.container-fluid -->
        </div>
        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row" style="border-top:0px;">
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-success">
                            <div class="inner">
                                <h3 th:text="${blogCount}">65</h3>

                                <p>总文章数</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-list-alt"></i>
                            </div>
                            <a th:href="@{/admin/blogs}" class="small-box-footer">More info <i
                                    class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-warning">
                            <div class="inner">
                                <h3 th:text="${categoryCount}">65</h3>

                                <p>分类数量</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-bookmark"></i>
                            </div>
                            <a th:href="@{/admin/categories}" class="small-box-footer">More info <i
                                    class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3 th:text="${tagCount}">65</h3>

                                <p>标签总量</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-tags"></i>
                            </div>
                            <a th:href="@{/admin/tags}" class="small-box-footer">More info <i
                                    class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-danger">
                            <div class="inner">
                                <h3 th:text="${linkCount}">65</h3>

                                <p>友情链接</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-heart"></i>
                            </div>
                            <a th:href="@{/admin/links}" class="small-box-footer">More info <i
                                    class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                </div>
            </div><!-- /.container-fluid -->

            <div class="row">
                <div class="col-md-6">
                    <!-- DONUT CHART -->
                    <div class="box box-danger">
                        <div class="box-header with-border">
                            <h4 class="box-title">博客分类统计</h4>
                        </div>
                        <div class="box-body">
                            <canvas id="pieChart" style="height:250px"></canvas>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>

                <!-- /.col (LEFT) -->
                <div class="col-md-6">
                    <!-- BAR CHART -->
                    <div class="box box-success">
                        <div class="box-header with-border">
                            <h4 class="box-title">博客日期统计</h4>
                        </div>
                        <div class="box-body">
                            <div class="chart">
                                <canvas id="barChart" style="height:230px"></canvas>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>


                <!-- /.col (RIGHT) -->
            </div>
            <!-- /.row -->

        </div>
        <!-- /.content -->
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/admin/dist/js/adminlte.min.js}"></script>

<script>
    drawPieChart();
    drawBarChart();

    //静态饼状图
    // var ctx2 = document.getElementById('pieChart').getContext('2d');
    // // For a pie chart
    // var myPieChart = new Chart(ctx2, {
    //     type: 'pie',
    //     data: data = {
    //         datasets: [{
    //             label: 'My First dataset',
    //             backgroundColor: ['rgba(255,110,43,0.89)', 'rgba(0,148,189,0.89)', 'rgba(26,173,0,0.64)',
    //                 'rgba(184,0,0,0.59)', 'rgba(156,43,255,0.89)', 'rgba(160,182,0,0.73)', 'rgba(0,255,177,0.51)',
    //                 'rgba(0,59,175,0.89)', 'rgba(44,0,127,0.89)'
    //             ],
    //             borderColor: 'rgb(255,255,255)',
    //             data: [10, 20, 30, 7, 18, 5, 4, 9, 8, 6]
    //         }],
    //
    //         // These labels appear in the legend and in the tooltips when hovering different arcs
    //         labels: ['Java', 'Spring', 'SpringMVC', 'MyBatis', 'Spring Boot', 'MySQL',
    //             'Vue', '开发工具', '数据结构与算法', 'Python']
    //
    //     },
    //     options: {}
    // });

    // //静态柱状图
    // var ctx3 = document.getElementById('barChart').getContext('2d');
    // var myBarChart = new Chart(ctx3, {
    //     type: 'bar',
    //     data: {
    //         labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    //         datasets: [
    //             {
    //                 backgroundColor: 'rgba(227,101,39,0.89)',
    //                 borderColor: 'rgb(255,255,255)',
    //                 data: [4, 7, 18, 16, 3, 6, 9, 4, 4, 6, 11, 5,]
    //             }
    //         ]
    //     },
    //     options: {}
    // });

    //*************ajax请求数据绘制chart*****************************
    function drawPieChart() {
        //使用Ajax获取json数据
        var jsonData = $.ajax({
            url: '/admin/pieChart',
            dataType: 'json',
        }).done(function (results) {
            console.log(results);
            // 将获取到的json数据分别存放到两个数组中
            var labels = [], data = [];
            for (var sensorRecord in results) {
                labels.push(results[sensorRecord].name);
                data.push(results[sensorRecord].count);
            }

            console.log(labels);
            console.log(data);

            // 设置图表的数据
            var tempData = {
                labels: labels,
                datasets: [{
                    label: "分类统计",
                    data: data,
                    backgroundColor: ['rgba(255,110,43,0.89)', 'rgba(0,148,189,0.89)', 'rgba(26,173,0,0.64)',
                        'rgba(184,0,0,0.59)', 'rgba(156,43,255,0.89)', 'rgba(160,182,0,0.73)', 'rgba(0,255,177,0.51)',
                        'rgba(0,59,175,0.89)', 'rgba(44,0,127,0.89)'
                    ],
                    borderColor: 'rgb(255,255,255)',
                }]
            };

            // 获取所选canvas元素的内容
            var ctx = document.getElementById("pieChart").getContext('2d');
            console.log(tempData)
            var myPieChart = new Chart(ctx, {
                type: 'pie',
                data: tempData,
                options: {
                    maintainAspectRatio: true,
                }
            });
        });
// 原文链接：https://blog.csdn.net/u013201439/article/details/72794408
    }

    function drawBarChart() {
        //使用Ajax获取json数据
        var jsonData = $.ajax({
            url: '/admin/barChart',
            dataType: 'json',
        }).done(function (results) {
            // console.log(results);
            // 将获取到的json数据分别存放到两个数组中
            var labels = [], data = [];
            for (var sensorRecord in results) {
                labels.push(results[sensorRecord].month);
                data.push(results[sensorRecord].count);
            }
            console.log(labels);
            console.log(data);
            // 设置图表的数据
            var tempData = {
                labels: labels,
                datasets: [{
                    label: "日期统计",
                    data: data,
                    backgroundColor: 'rgba(227,101,39,0.89)',
                    borderColor: 'rgb(255,255,255)',
                }]
            };

            // 获取所选canvas元素的内容
            var ctx = document.getElementById("barChart").getContext('2d');
            var myBarChart = new Chart(ctx, {
                type: 'bar',
                data: tempData,
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                    //Y轴从0开始
            // 转自链接：https://learnku.com/articles/4081/chartjs-set-y-axis-starting-from-0
                }
            });
        });
    }

</script>

</body>
</html>
